<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{pageTitle}</title>
<link rel="stylesheet" type="text/css" href="template/default.css" />
<link rel="stylesheet" type="text/css" href="default.css" />
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript">
var paragraphCounter = 0;
var refCounter = 0;
var iLCounter = 0;

function edit(a)
{
	/* alert(a); */
	var ra = document.getElementsByTagName("div");
	for (var i = 0; i < ra.length; i++) {
		ra[i].style.display = "";
	}
	/* 例外1 */
	document.getElementById("user_status").style.display = "none";
	
	var ra = document.getElementsByTagName("h1");
	for (var i = 0; i < ra.length; i++) {
		ra[i].style.display = "";
	}
	var rb = document.getElementsByTagName("input");
	for (var i = 0; i < rb.length; i++) {
		rb[i].style.display = "none";
	}
	var rc = document.getElementsByTagName("textarea");
	for (var i = 0; i < rc.length; i++) {
		rc[i].style.display = "none";
	}
	/* 例外2 */
	document.getElementById("document_submit").style.display = "";
	document.getElementById("document_discard").style.display = "";
	
	document.getElementById(a + "_edit").style.display = "";
	if(a.substring(a.length-7,a.length) == "content"){
		document.getElementById(a + "_edit").style.height = (document.getElementById(a).scrollHeight + 80) + "px";
	}
	var str = document.getElementById(a).innerHTML;
	var pattern = /<br>/g;
	document.getElementById(a + "_edit").value = str.replace(pattern,"\n");
	document.getElementById(a).style.display = "none";
	self.location = "#" + a + "_edit";
}

function editSubmit(a){
	if(document.getElementById(a + "_edit").value != ""){
		var str = document.getElementById(a + "_edit").value;
		var pattern = /\r|\n/g;
		document.getElementById(a).innerHTML = str.replace(pattern,"<br>");
	} else {
		if(a.substring(a.length-7,a.length) == "content"){
			document.getElementById(a).innerHTML = "put some text here.";
		} else if(a == "title_edit") {
			document.getElementById("title").innerHTML = "put some text here.";
		} else {
			removeElement(a);
			removeElement(a + "_edit");
		}
		/*if(a.substring(2,3))*/
	}
}

function createElement(container, type, attri, style, internalHTML)
{ 
    var e = document.createElement(type);
    document.getElementById(container).appendChild(e); 
    if (attri) { 
        for (var k in attri) { 
            if (k == 'class') e.className = attri[k]; 
            else if (k == 'id') e.id = attri[k]; 
    	else e.setAttribute(k, attri[k]); 
    	} 
    } 
    if(style)
	{ 
		for (var k in style) e.style[k] = style[k];
	} 
    if(internalHTML) {
		e.appendChild(document.createTextNode(internalHTML));
	} 
    return e; 
}  

function addParagraph()
{
	/* add new paragraph container */
    var newElement = createElement(
		'paragraphs',
		'div', 
		{
			'class': 'paragraph_create', 
			id: 'p_' + paragraphCounter.toString(10), 
			name: 'p_' + paragraphCounter.toString(10)
		},
		{}
	);
	/* add new paragraph content */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_content', 
			id: 'p_' + paragraphCounter.toString(10) + '_content', 
			name: 'p_' + paragraphCounter.toString(10) + '_content',
			'onclick': 'edit(\'p_' + paragraphCounter.toString(10) + '_content\')'
		},
		{}, 
		'Click to edit Paragraph #' + paragraphCounter.toString(10)
	);
	/* add new paragraph content editor */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'textarea',
		{
			'class': 'p_content_edit', 
			'rows': 6,
			id: 'p_' + paragraphCounter.toString(10) + '_content_edit', 
			name: 'p_' + paragraphCounter.toString(10) + '_content',
			'onchange': 'editSubmit(\'p_' + paragraphCounter.toString(10) + '_content\')'
		}
		,
		{
			display: 'none'
		}
		,
		'Here is the Paragraph #' + paragraphCounter.toString(10)
	);
	/* add Delete link */
	var newElement = createElement(
		'paragraphs',
		'a',
		{
			id: 'p_' + paragraphCounter.toString(10) + '_del_link',
			'href': '#',
			'onclick': 'removeElement(\'p_' + paragraphCounter.toString(10)+'\');removeElement(\'p_' + paragraphCounter.toString(10)+'_del_link\')'
		},
		{}
		,
		'[- Del This Paragraph]'
	);	
	/* add new paragraph ref container */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_ref', 
			id: 'p_' + paragraphCounter.toString(10) + '_refs',
		},
		{}
	);
	/* add the ref link */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10) + '_refs',
		'a',
		{
			'href': '#',
			'onclick': 'addRef(\'p_'+paragraphCounter.toString(10)+'_refs\',\''+paragraphCounter.toString(10)+'\')'
		},
		{}
		,
		'[+ New Ref]'
	);
	/* add new paragraph internal_link container */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_internal_link', 
			id: 'p_' + paragraphCounter.toString(10) + '_internal_links',
		},
		{}
	);
	/* add the internal_link link */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10) + '_internal_links',
		'a',
		{
			'href': '#',
			'onclick': 'addIL(\'p_'+paragraphCounter.toString(10)+'_internal_links\',\''+paragraphCounter.toString(10)+'\')'
		},
		{}
		,
		'[+ New Internal Link]'
	);

	paragraphCounter++;
}

function addRef(container,pid){
	var newElement = createElement(
		container,
		'div', 
		{
			'class': 'ref_c', 
			id: 'p_' + pid + '_ref_' + refCounter.toString(10), 
			name: 'p_' + pid + '_ref[]', 
			'onclick': 'edit(\'p_' + pid + '_ref_' + refCounter.toString(10) + '\')'
		},
		{}, 
		'Here is the Ref #' + refCounter.toString(10)
	);
	var newElement = createElement(
		container,
		'input', 
		{
			'class': 'ref_edit_c', 
			id: 'p_' + pid + '_ref_' + refCounter.toString(10) + '_edit', 
			name: 'p_' + pid + '_ref[]',  
			'onchange': 'editSubmit(\'p_' + pid + '_ref_' + refCounter.toString(10) + '\')',
			'value': 'Click to edit Ref #' + refCounter.toString(10)
		}
		,
		{
			display:'none'
		}
	);
	refCounter++;
}

function addIL(container,pid){
	var newElement = createElement(
		container,
		'div', 
		{
			'class': 'internal_link_c', 
			id: 'p_' + pid + '_internal_link_' + iLCounter.toString(10), 
			name: 'p_' + pid + '_internal_link[]', 
			'onclick': 'edit(\'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '\')'
		},
		{}
		, 
		'Here is the Internal Link #' + iLCounter.toString(10)
	);
	var newElement = createElement(
		container,
		'input', 
		{
			'class': 'internal_link_edit_c', 
			id: 'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '_edit', 
			name: 'p_' + pid + '_internal_link[]', 
			'onchange': 'editSubmit(\'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '\')',
			'value' : 'Click to edit Internal Link #' + iLCounter.toString(10)
		},
		{
			display:'none'
		}
	);
	iLCounter++;
}
function removeElement(elemID) {
    var elem = document.getElementById(elemID);
    elem.parentNode.removeChild(elem);
}
function logout()
{
	document.getElementByID("links").submit;
}
function pDisplaySwitch(a)
{	
	a_s = document.getElementById(a).style.display;
	if(a_s == "" || a_s == "block"){
		document.getElementById(a).style.display = "none";
	} else if(a_s == "none"){
		document.getElementById(a).style.display = "";
		document.getElementById(a).style.display = "block";
	}
}
function show(a)
{	
	document.getElementById(a).style.display = "";
	document.getElementById(a).style.display = "block";
}
function hide(a)
{	
	document.getElementById(a).style.display = "none";
}
function check(form)
{
	if(document.getElementsByTagName("textarea").length == 0)
	{
		alert("Add at least one paragraph!");
		return false;
	} else if(document.getElementById("title_edit").value.length > 100) {
		alert("The title length should be smaller than 100 chars.");
		return false;
	}else {
		var re = new RegExp("_");
		var ifer = true;
		var r = getElementAdvance("_internal_link_","input");
		for(var i = 0; i<r.length; i++){
			if(!(r[i].value).match(re))
			{
				ifer = false;
			}
		}
		if(ifer == false){
			alert("\"Internal Link\" should in this format: _XX, and XX is a number.");
			return false;
		} else return true;
	}
	return true;
}
function getElementAdvance(name,type) {
  var r = [];
  var re = new RegExp("(^|\\S)" + name + "(\\S|$)");
  var e = document.getElementsByTagName(type || "*");
  for(var j = 0; j < e.length; j++){
  	if((e[j].id).match(re))
	{	
		r.push(e[j]);
	}
  }
  return r;
}
function submitRating(evt)
{
	var tmp = evt.target.getAttribute('id').substr(5);
	var ip = "{ip}";
	var uid = "{user_id}";
	var widgetId = tmp.substr(0, tmp.indexOf('_'));
	var ownerType = widgetId.substr(0,1);
	var ratingType = widgetId.substr(1,1);
	var ownerId =  widgetId.substr(2,widgetId.length - 2);
	var starNbr = Number(tmp.substr(tmp.indexOf('_')+1)) + 1;
	$.get("./rating_submit.php",
    	{
			ratingType: ratingType, 
			ownerType: ownerType,
			ownerId: ownerId, 
			ip: ip, 
			userId: uid,
			value: starNbr
		},
    	function(data){
			alert(data);
			if(data == "Thank you for rating!"){
				window.location.reload(true);
			}
		}
    );
}
function jqueryInit()
{
	init_rating();
	$('div.rating/img').bind('click', submitRating);
}
$(document).ready(jqueryInit);
</script>
</head>
<body>
{user_session}
<form action="document_create.php" onsubmit="return check(this);" method="post">
<div id="container">
	<h1 id="title" onclick="edit('title');">{title}</h1>
	<input id="title_edit" style="display:none" name="title" onchange="editSubmit('title')" value="{title}"/>
	<div id="document_info">
	Creator: [<a href="{creator_link}">{creator}</a>]
	&nbsp;&nbsp; Update Time:{update_time}<br />
	</div>
	<div id="paragraphs">
	</div>
	<a href="#" onclick="addParagraph();">[++ New Paragraph]</a>
	<h3>Parent Node</h3>
	<ul class="links">
		<li class="links">[<a href="{father_url}">{father_title}<input type="hidden" name="fatherId" value="{father_id}" /></a>]</li>
	</ul>
	<input id="document_submit" type="submit" value="Submit" />
	<input id="document_discard" type="button" value="Discard" onclick="window.history.back()" />
</div>
</form>
</body>
</html>